<template>
  <el-form :model="outline" ref="anwersDto" label-width="50px" class="demo-dynamic">
    <!-- 大纲下的目录 -->
    <el-form-item
      v-for="(topicName, index) in anwersDto.topics"
      :label="'题目' + (index+1)"
      :key="topicName.key"
      :prop="'topics.' + index + '.topicName'">
      <el-input v-model="topicName.topicName" style="width: 200px" size="mini"></el-input>
      <el-button @click.prevent="removeCatalog(topicName)" size="mini" type="danger">删除题目</el-button>

      <!-- 目录下的课件 -->
      <el-form :model="topicName" ref="topicName" label-width="50px" class="demo-dynamic">
        <el-form-item 
          v-for="(etmsResachAnwers, index) in topicName.etmsResachAnwers"
          :label="'答案' + (index+1)"
          :key="etmsResachAnwers.key"
          :prop="'etmsResachAnwers.' + index + '.value'">
          <el-input v-model="etmsResachAnwers.answerContent" style="width: 150px" size="mini"></el-input>
          <el-button @click.prevent="removeClassFile(topicName, etmsResachAnwers)" size="mini" type="danger">删除答案</el-button>
        </el-form-item>
      <el-button @click="addClassFile(topicName)" size="mini">新增答案</el-button>
      </el-form>

    </el-form-item>
    <el-form-item>
      <el-button @click="addCatalog" size="mini">新增题目和答案</el-button>
      <el-button type="primary" @click="submitForm('dynamicValidateForm')" size="mini">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import {addtemplate} from '@/api/templateTable'
  export default {
    data() {
      return {
        //大纲数据
        anwersDto: {
          topics: [{
            etmsResachAnwers: [{
            answerId: '',
            answerContent:'',
            creatorid:'',
            createtime:'',
            updated:'',
            updatetime:''
            }],
            topicId: '',
            topicName: '',
            creatorid:'',
            createtime:'',
            updated:'',
            updatetime:''
          }]
        }
      };
    },
    methods: {
      //目录新增删除
      removeCatalog(item) {
        var index = this.anwersDto.topics.indexOf(item)
        if (index !== -1) {
          this.anwersDto.topics.splice(index, 1)
        }
      },
      addCatalog() {
        this.anwersDto.topics.push({
          etmsResachAnwers: [{
              answerContent: ''
            }],
            topicName: '',
          key: Date.now()
        });
      },

      //课程新增删除
      removeClassFile(topicName, etmsResachAnwers) {
        var index = topicName.etmsResachAnwers.indexOf(etmsResachAnwers)
        if (index !== -1) {
          topicName.etmsResachAnwers.splice(index, 1)
        }
      },
      addClassFile(topicName) {
        topicName.etmsResachAnwers.push({
          topicName: '',
          key: Date.now()
        });
      },
      submitForm(formName){
          addtemplate(this.anwersDto).
            then(res =>{
              console.log(this.anwersDto);
             if (res.code==200) {
                this.$message({
                  type: 'success',
                  message: '新增成功！'
                })
              } else {
                this.$message({
                  type: 'info',
                  message: res.data.message
                })
              }
            }).catch()
      }
    }
  }
</script>